iT邦幫忙

2024 iThome 鐵人賽

DAY 9
0

迭代器方法是用來遍歷陣列或其他可迭代物件的方法。這些方法讓我們能夠對每一個元素進行操作,不需手動使用傳統的循環結構。常見的迭代器方法包括 forEach()、map()、filter()、reduce()、find() 和 some() 等。

1. forEach()

forEach() 是一個簡單的迭代方法,會對陣列中的每個元素執行一次指定的函數。

語法:

array.forEach(function(元素, 索引, 陣列) {
// 對每個元素執行的操作
});

範例:

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});
// 輸出 1, 2, 3, 4, 5

2. map()

map() 會創建一個新陣列,這個新陣列的每個元素是根據原始陣列中的元素進行處理後得到的。與 forEach() 不同,map() 返回一個新的陣列。

語法:
let newArray = array.map(function(元素, 索引, 陣列) {
// 返回處理後的值
});

範例:

let numbers = [1, 2, 3];
let doubled = numbers.map(function(number) {
return number * 2;
});
console.log(doubled); // 輸出 [2, 4, 6]

3. filter()

filter() 用於篩選陣列,返回一個符合條件的新陣列。

範例:
let filteredArray = array.filter(function(元素, 索引, 陣列) {
// 返回條件判斷
});

範例:

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // 輸出 [2, 4]

4. reduce()

reduce() 將陣列中的所有元素依次累加成單一值。它需要一個累加器(accumulator)和當前值(current value)來進行操作。

語法:

let result = array.reduce(function(累加器, 當前值, 索引, 陣列) {
// 返回新的累加器值
}, 初始值);

範例:

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce(function(total, number) {
return total + number;
}, 0);
console.log(sum); // 輸出 10

5. find()

find() 返回陣列中第一個符合條件的元素,如果沒有找到則返回 undefined。

語法:

let element = array.find(function(元素, 索引, 陣列) {
// 返回條件判斷
});

範例:

let numbers = [5, 12, 8, 130, 44];
let found = numbers.find(function(number) {
return number > 10;
});
console.log(found); // 輸出 12

6. some() 和 every()

  • some() 用來檢查陣列中是否至少有一個元素符合條件,返回 true 或 false。
  • every() 用來檢查陣列中的所有元素是否都符合條件,返回 true 或 false。

範例:

let numbers = [1, 2, 3, 4, 5];

let hasEven = numbers.some(function(number) {
return number % 2 === 0;
});
console.log(hasEven); // 輸出 true

let allEven = numbers.every(function(number) {
return number % 2 === 0;
});
console.log(allEven); // 輸出 false


上一篇
邏輯運算符
下一篇
運用前九天內容
系列文
JavaScript 基礎:端開發的第一步30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言